<template>
  <app-content class="h-panel">
    <Tabs :datas="tabDatas" style="padding-top: 10px" v-model="selected"></Tabs>
    <div class="h-panel-body padding">
      <account-category ref="accountCategory" v-if="showAccount"></account-category>
      <category-custom ref="categoryCustom" :id="customId" v-if="showCustom"></category-custom>
    </div>
  </app-content>
</template>
<script>
  import AccountCategory from './AccountCategory'
  import CategoryCustom from './CategoryCustom'
  import Vue from 'vue'
  import { DEFAULT_COLOR } from '@/store/mutation-types'
  import { updateTheme } from '@comp/tools/setting'
  export default {
    name: "AssistAccount",
    components: {
      AccountCategory,
      CategoryCustom
    },
    data() {
      return {
        selected: 'AccountCategory',
        tabDatas: [{
          title: '辅助核算类别',
          key: 'AccountCategory'
        }],
        showAccount: true,
        showCustom: false,
        customId: '',
      };
    },
    watch: {
      selected(val) {
        console.log(val)
        if (val == 'AccountCategory') {
          // this.$router.push({name: val})
          this.showAccount = true
          this.showCustom = false
        } else {
          // this.$router.push({name: 'CategoryCustom', params: {id: val}})
          this.showAccount = false
          this.showCustom = true
          this.customId = val
        }
      }
    },
    mounted () {
      this.primaryColor = Vue.ls.get(DEFAULT_COLOR)
      updateTheme(this.primaryColor)
      this.init()
    },
    methods: {
      init() {
        if (this.$route.name == 'CategoryCustom') {
          this.selected = this.$route.params.id
        }
        this.$api.setting.accountingCategory.list().then(({data}) => {
          data.forEach(val => {
            this.tabDatas.push({
              title: val.name,
              key: val.id
            })
          });
        });
      },
      reloadTabs() {
        this.$api.setting.accountingCategory.list().then(({data}) => {
          let tabDatas = [{
            title: '辅助核算类别',
            key: 'AccountCategory'
          }];
          data.forEach(val => {
            tabDatas.push({
              title: val.name,
              key: val.id
            });
          });
          this.tabDatas = tabDatas;
        });
      }
    }
  };
</script>
<style lang='less'>
  div.h-panel-bar {
    border-top: 0px solid #eeeeee
  }
  .h-tabs-default {
    >.h-tabs-item {
      &:hover, &.h-tabs-item-selected {
        color: #2F2F2F !important;
        font-weight: bold;
        border-bottom: 3px solid gray !important;
      }
    }
  }
</style>